<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Image Glyph Renderer 2D Test</title>
  <style>
    canvas
    {
      background-color: #D7F0C4;
    }
  </style>
  <script src="../../_libs/raphael-min.2.0.1.js"></script>
  <script src="../../../src/kekule.js?min=false"></script>
  <script>
    var drawBoxWidth = 500;
    var drawBoxHeight = 500;
    var drawBridge;
    var drawContext;

    function createImages()
    {
      var result = [];
      var imgProps = [
        {'src': 'images/generalUiIcons.png', 'width': 256, 'height': 240, 'x': 0, 'y': 0},
        {'src': 'images/warning.svg', 'width': 50, 'height': 50, 'x': 300, y: 0},
        {'src': '', 'width': 218 * 1.5, 'height': 178, 'x': 0, y: 250}
      ];
      for (var i = 0, l = imgProps.length; i < l; ++i)
      {
        var imgProp = imgProps[i];
        var imgGlyph = new Kekule.ImageBlock('img' + i, imgProp.src);
        imgGlyph.setCoord2D({x: imgProp.x, y: imgProp.y});
        imgGlyph.setSize2D({x: imgProp.width, y: imgProp.height});
        result.push(imgGlyph);
      }
      return result;
    }

    function getDrawStage()
    {
      return document.getElementById('drawStage');
    }
    function getDrawBridge()
    {
      if (!drawBridge)
        drawBridge = Kekule.Render.DrawBridge2DMananger.getPreferredBridgeInstance();
      return drawBridge;
    }
    function getContext()
    {
      if (!drawContext)
        drawContext = getDrawBridge().createContext(getDrawStage(), drawBoxWidth, drawBoxHeight);
      return drawContext;
    }
    function drawImage()
    {
      var images = createImages();
      for (var i = 0, l = images.length; i < l; ++i)
      {
        var image = images[i];
        var renderer = new Kekule.Render.ImageBlock2DRenderer(image, getDrawBridge());
        renderer.draw(getContext(), null, {transformParams: {}});
      }
    }

    function init()
    {
      drawImage();
    }
  </script>
</head>
<body onload="init()">
  <div id="drawStage">
  </div>
</body>
</html>